<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="func_handleAdd">添加属性</el-button>
                <el-button type="success" icon="el-icon-refresh" @click="func_handleSearch" plain>刷新</el-button>
            </div>
            <el-table :data="attributeTableData" :v-loading="isLoading" class="table" ref="multipleTable"
                row-key="id" border header-cell-class-name="table-header">
                <el-table-column type="expand" >
                    <template #default="scope">
                        <el-scrollbar>
                        <el-table :data="scope.row.attributeValues" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column label="index" width="70" align="center">
                                <template #default="scope">
                                    {{scope.$index +1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="attrId" label="绑定属性ID" v-if="false"></el-table-column>
                            <el-table-column prop="attrLabel" label="选择值名称" ></el-table-column>
                            <el-table-column prop="sort" label="操作" :width=optColumnWidth>
                                <template #default="scope">
                                    <el-button type="text" class="red" @click="func_handlerDelAttributeValue(scope.$index, scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        </el-scrollbar>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="70" align="center"  v-if="false"></el-table-column>
                <el-table-column label="index" width="70" align="center">
                    <template #default="scope">
                        {{scope.$index +1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="attrName" label="属性名称">
                    <template #default="scope">
                        <el-button type="text" @click="func_handleOpenDrawer(scope.$index, scope.row)" >{{scope.row.attrName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="classifyName" label="所属类目">
                    <template #default="scope">
                    {{classifyData.classifyName}}</template>
                </el-table-column>
                <el-table-column prop="inputType" label="输入方式"></el-table-column>
                <el-table-column prop="strInputType" label="输入方式"></el-table-column>
                <el-table-column :width=optColumnWidth>
                    <template #default="scope">
                        <el-button type="text" class="red mr10" icon="el-icon-delete" @click="func_handlerDel(scope.$index, scope.row)"> 删除</el-button>
                        <el-dropdown :hide-on-click="false">
                            <span class="el-dropdown-link green mr10"><el-icon class="el-icon-lx-info mr10" />更多</span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :disabled="scope.row.inputType === '11010001'" @click="func_handlerBundValueDialog(scope.$index, scope.row)" >
                                        <el-icon class="el-icon-lx-edit" />编辑属性值
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="dataTotal" @current-change="func_handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 详情数据抽屉框 -->
        <el-drawer v-model="drawerEditVisible" title="类目属性详情" :with-header="true" size="55%">
            <VAttributeDrawer v-bind:selectValue="selectAttributeDrawer" @attributeData="func_loadvAttributeDrawerData" />
        </el-drawer>
        <!-- 引用数据插件 -->
        <el-dialog title="添加属性" v-model="vAttributePopVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VAttributePop v-bind:selectValue="classifyData" @attributeData="func_loadvAttributeData" />
            </div>
        </el-dialog>
        <!-- 引用数据插件 -->
        <el-dialog title="绑定属性值" v-model="vAttributeValueDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VAttributeValueTable v-bind:selectValue="selectAttribute" @attributeValueData="func_loadvAttributeValueData" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findClassifyInfoById, } from '../../../api/hairmanager/productClassify';
import { findAttributeListPageByClassifyId, deleteAttribute, } from '../../../api/hairmanager/productAttribute';
import { deleteAttributeValue, } from '../../../api/hairmanager/productAttributeValue';

import VAttributePop from './components/attributeForm.vue';
import VAttributeValueTable from './components/attributeValueTablePop.vue';
import VAttributeDrawer from './components/attributeDrawerForm.vue';

export default {
    name: "productAttribute",
    components: {VAttributePop, VAttributeValueTable, VAttributeDrawer},
    setup() {
        const router = useRouter();
		const route = useRoute();
        const optColumnWidth = 150;
        // 主表格查询条件
        const query = reactive({
            classifyId: 0,
            pageNum: 1,
            pageSize: 10,
        });
        // 主表格数据
        const attributeTableData = ref([]);
        // 主表格数据总数
        const dataTotal = ref(0);
        const isLoading = ref(true);
        // 分类表单数据
        const classifyData = reactive({
            id : 0,
            classifyColumn: "",
            strClassifyColumn: "",
            classifyId: 0,
            classifyName: "",
            remark: "",
            classifyGrade: 0,
            parentId: 0,
            load: false,
        });
        // =========================================================================================
        // 主表格业务处理========================================================================================= START
        /**
         * @name 获取主表格数据
         */
        const func_getData = () => {
            var id = route.query.id;
            // 读取分类数据
            findClassifyInfoById(id).then((res) => {
                Object.keys(classifyData).forEach(item => {
                    classifyData[item] = res.data[item];
                });
            })
            query['classifyId'] = id;
            // 读取分类下的数据属性表格
            findAttributeListPageByClassifyId(query).then((res) => {
                attributeTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
            isLoading.value = false;
        };
        /**
         * @name 主数据查询操作
         */
        const func_handleSearch = () => {
            query.pageNum = 1;
            func_getData();
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            query.pageNum = val;
            func_getData();
        };
        func_getData();
        const func_handleAdd = () => {
            classifyData['classifyId'] = route.query.id;
            classifyData['load'] = false;
            vAttributePopVisible.value = true;
        };
        /**
         * @name 主表格内删除数据
         */
        const func_handlerDel = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",})
            .then(() => {
                deleteAttribute(row['id']).then((res) => {
                    ElMessage.success("删除成功");
                    func_getData();
                });
            }).catch(() => {});
        };
        /**
         * @name 子表格内删除数据
         */
        const func_handlerDelAttributeValue = (index, id) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",})
            .then(() => {
                deleteAttributeValue(id).then((res) => {
                    ElMessage.success("删除成功");
                    func_getData();
                });
            }).catch(() => {});
        };
        // 主表格业务处理========================================================================================= END
        // 详细数据抽屉业务处理========================================================================================= START
        const drawerEditVisible = ref(false);
        const selectAttributeDrawer = reactive({
            classifyId: 0,
            selectValueId: 0,
            selectValueName: '',
        });
        /**
         * @name 主表格内抽屉业务处理
         * @desp 类目属性数据业务处理
         */
        const func_handleOpenDrawer = (index, row) => {
            selectAttributeDrawer['classifyId'] = route.query.id;
            selectAttributeDrawer['selectValueId'] = row.id;
            selectAttributeDrawer['selectValueName'] = '';
            selectAttributeDrawer['load'] = true;
            drawerEditVisible.value = true;
        };
        const func_loadvAttributeDrawerData = (v) => {
            // 判定业务处理成功，关闭对话框,刷新列表，否则保持对话框状态
            if(v['state'] === 1) {
                drawerEditVisible.value = false;
                func_getData();
            }
        };
        // 详细数据抽屉业务处理========================================================================================= END
        // 组件业务处理========================================================================================= START
        const vAttributeValueDialogVisible = ref(false);
        const selectAttribute = reactive({
            selectValueId: 0,
            selectValueName: '',
        });
        const func_handlerBundValueDialog = (index, row) => {
            selectAttribute['selectValueId'] = row['id'];
            selectAttribute['selectValueName'] = row['attrName'];
            vAttributeValueDialogVisible.value = true;
        }
        const func_loadvAttributeValueData = (v) => {
            // 判定业务处理成功，关闭对话框,刷新列表，否则保持对话框状态
            if(v['state'] === 1) {
                vAttributeValueDialogVisible.value = false;
                func_getData();
            }
        }
        // 组件业务处理========================================================================================= END
        // 组件业务处理========================================================================================= START
        const vAttributePopVisible = ref(false);
        const func_loadvAttributeData = (v) => {
            // 判定业务处理成功，关闭对话框,刷新列表，否则保持对话框状态
            if(v['state'] === 1) {
                vAttributePopVisible.value = false;
                classifyData['load'] = true;
                func_getData();
            }
        }
        // 组件业务处理========================================================================================= END
        return {
            // 系统变量
            optColumnWidth, query, isLoading, attributeTableData, dataTotal, classifyData,
            // 主表格调用方法
            func_getData, func_handleSearch, func_handlePageChange, func_handleAdd, func_handlerDel,
            func_handlerDelAttributeValue,
            // 详情数据抽屉业务
            drawerEditVisible, selectAttributeDrawer, func_handleOpenDrawer, func_loadvAttributeDrawerData,
            // 组件业务处理
            vAttributePopVisible, func_loadvAttributeData,
            // 组件业务处理
            vAttributeValueDialogVisible, selectAttribute, func_handlerBundValueDialog, func_loadvAttributeValueData,
        };
    },
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 180px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-dropdown-link {
  cursor: pointer;
  /* color: var(--el-color-primary); */
  color: #67c23a;
  display: flex;
  align-items: center;
}
</style>